<template>
  <!-- 工单 -->
  <div class="workorder">
    <!-- 导航 -->
    <el-card class="top_nav" :shadow="shadowShow">
      <div class="top_nav_inner">
        <div class="top_nav_left pointer" @click="backHandle">
          <i class="el-icon-arrow-left p_blue" style="font-size: 20px"></i>
          <span class="p_blue">{{ $t('add.add114') }}</span>
        </div>
        <div class="top_nav_right" v-show="$config.showServicePhone">
          <el-button
            style="font-weight: 500; font-size: 14px; color: #333333"
            :size="optionButtonSize"
            type="text"
            plain
            @click="phoneHandle"
            >{{ $t('add.add115') }}：+86-27-65520255</el-button
          >
          <!-- <div @click="serviceHandle" class="item pointer">
                        <img src="@/assets/img/service.png" alt="">
                        <span>客服</span>
                    </div> -->
          <!-- <el-tooltip class="item" effect="light" content="教程" placement="bottom">
                        <div @click="courseHandle" class="item pointer">
                            <img src="@/assets/img/course.png" alt="">
                            <span>教程</span>
                        </div>
                    </el-tooltip> -->
        </div>
      </div>
    </el-card>
    <!-- 条件 -->
    <el-card class="top_nav" style="margin-top: 20px" :shadow="shadowShow">
      <div class="top_nav_inner">
        <div class="top_nav_left">
          <el-form label-width="90px" :inline="true" :size="optionButtonSize">
            <el-form-item>
              <el-input
                v-model="form.workNo"
                clearable
                :placeholder="$t('add.add116')"
                style="width: 150px"
              />
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="form.workOrderType"
                style="width: 150px"
                clearable
                :placeholder="$t('add.add117')"
              >
                <el-option
                  v-for="item in typeList"
                  :key="item.id"
                  :label="item.paramValue"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="form.statusName"
                style="width: 150px"
                clearable
                :placeholder="$t('add.add118')"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-date-picker
                v-model="dates"
                :end-placeholder="$t('versionLogManagement.version02')"
                :start-placeholder="$t('versionLogManagement.version01')"
                style="width: 300px"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                type="daterange"
                :placeholder="$t('add.add122')"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :size="optionButtonSize" @click="getPatientList">{{
                $t('add.add123')
              }}</el-button>
              <el-button plain :size="optionButtonSize" @click="resetClick">{{
                $t('add.add124')
              }}</el-button>
              <el-button :size="optionButtonSize" type="primary" @click="workorderHandle">{{
                $t('add.add125')
              }}</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- <div class="top_nav_right">
                    <el-button @click="workorderHandle" :size="optionButtonSize" type="primary">{{ $t('add.add125') }}</el-button>
                </div> -->
      </div>
    </el-card>

    <!-- //列表 -->
    <el-card :shadow="shadowShow" style="margin-top: 20px">
      <el-table
        :data="tableData"
        style="width: 100%"
        size="mini"
        :header-cell-style="headercellstyle"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column align="center" prop="workNo" :label="$t('add.add126')" />
        <el-table-column align="center" prop="content" :label="$t('add.add127')" />
        <el-table-column align="center" prop="workOrderType" :label="$t('add.add117')">
          <!-- <template slot-scope="scope" style="display:flex;justify-content: flex-start;">
                        <span v-if="scope.row.workOrderType == 29">其他</span>
                        <span v-if="scope.row.workOrderType == 26">建议或需求</span>
                        <span v-if="scope.row.workOrderType == 24">问题</span>
                        <span v-if="scope.row.workOrderType == 22">全部</span>
                    </template> -->
        </el-table-column>
        <el-table-column align="center" prop="updateDate" :label="$t('add.add129')">
          <!-- <template slot-scope="scope" style="display:flex;justify-content: flex-start;">
                        {{ scope.row.changeInfo }}
                    </template> -->
        </el-table-column>
        <el-table-column align="center" prop="statusName" :label="$t('add.add130')" />
        <!-- <el-table-column align="center" prop="creatorName" label="创建人"></el-table-column>
                <el-table-column align="center" prop="createDate" :label="$t('add.add134')" width="160"></el-table-column>
                <el-table-column align="center" label="所属机构"></el-table-column> -->
        <el-table-column align="center" :label="$t('add.add131')" width="200">
          <template slot-scope="scope" style="display: flex; justify-content: flex-start">
            <div v-if="user_superAdmin == 1"></div>
            <div v-if="user_superAdmin != 1" style="display: flex; justify-content: center">
              <el-button
                style="margin-right: 10px"
                type="text"
                :size="tableButtonSize"
                @click="toDetail(scope.row)"
                >{{ $t('add.add132') }}</el-button
              >
              <div v-if="user_owner == 1 || user_organizedRoleId == 2 || user_organizedRoleId == 4">
                <el-button
                  v-if="scope.row.status != 'close'"
                  type="text"
                  :size="tableButtonSize"
                  @click="guanbi(scope.row.id)"
                  >{{ $t('add.add139') }}</el-button
                >
                <el-button
                  v-if="scope.row.status == 'close'"
                  type="text"
                  :size="tableButtonSize"
                  @click="deleteItem(scope.row.id)"
                  >{{ $t('add.add38') }}</el-button
                >
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin: 16px 0; float: right">
        <el-pagination
          background
          :current-page.sync="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- <Service class="work_service"/> -->
    <Course ref="Course" />
    <WorkOrderAdd ref="WorkOrderAdd" @getList="getList" />
    <detail ref="detail" />
  </div>
</template>

<script>
import Course from '@/components/course/index'; // 教程
import Service from '@/components/service/index'; // 客服
import WorkOrderAdd from './add.vue'; // 添加工单
import detail from './detail.vue'; // 添加工单
export default {
  name: 'BLZMasterIndex',
  components: {
    Course,
    Service,
    WorkOrderAdd,
    detail,
  },
  data() {
    return {
      serviceShow: false,
      dates: [],
      form: {
        workNo: '',
        workOrderType: '',
        statusName: '',
     
        startTime: '',
        endTime: '',
      },
      options: [
        {
          value: 'run',
          label: this.$t('add.add119'),
        },
        {
          value: 'close',
          label: this.$t('add.add120'),
        },
        {
          value: 'wait',
          label: this.$t('add.add121'),
        },
      ],
      page: 1, // 默认第1页
      limit: 20, // 每页条数
      total: 0, // 总条数
      tableData: [],
      typeList: [],
      user_organizedRoleId: '',
      user_superAdmin: '',
      user_owner: '',
      organizedType: '',
    };
  },
  created() {
    this.getList();
    this.getTypeList();
  },

  mounted() {
    this.user_organizedRoleId = window.localStorage.getItem('user_organizedRoleId');
    this.user_superAdmin = localStorage.getItem('user_superAdmin');
    this.user_owner = localStorage.getItem('user_owner'); // 1为所有者
    this.organizedType = localStorage.getItem('user_organizedType'); // 1诊所 2技工所
  },

  methods: {
    // 拿所有数据
    getList() {
      this.$http
        .get(
          `/workmanager/page?page=${this.page}&limit=${this.limit}&workNo=${this.form.workNo}&workOrderType=${this.form.workOrderType}&statusName=${this.form.statusName}&startTime=${this.form.startTime}&endTime=${this.form.endTime}`,
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.tableData = res.data.list;
            this.total = res.data.total;
            if (this.tableData.length <= 0 && this.page > 1) {
              this.page -= 1;
              this.getList();
            }
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // 工单类型
    getTypeList() {
      this.$http
        .get('/sys/params/page?page=1&limit=9999&paramCode=work_order_type&paramType=1')
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.typeList = res.data.list;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    guanbi(id) {
      this.$confirm(this.$t('add.add141'), this.$t('add.add140'), {
        confirmButtonText: this.$t('add.add81'),
        cancelButtonText: this.$t('add.add203'),
        type: 'warning',
      })
        .then(async () => {
          this.$http
            .post('/workmanager/saveOrUpdate', { id: id, status: 'close' })
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              } else {
                this.$message.success(this.$t('add.add144'));
                this.getList();
              }
            })
            .catch((err) => {
              console.log('err', err);
            });
        })
        .catch((err) => {
          console.log('err==>', err);
          this.$message({
            type: 'info',
            message: this.$t('add.add145'),
          });
        });
    },
    toDetail(val) {
      this.$refs.detail.form = val;
      this.$refs.detail.dialogShow = true;
    },
    deleteItem(id) {
      this.$confirm(this.$t('add.add084'), this.$t('add.add140'), {
        confirmButtonText: this.$t('add.add81'),
        cancelButtonText: this.$t('add.add203'),
        type: 'warning',
      })
        .then(async () => {
          this.$http
            .delete(`/workmanager?id=${id}`)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              } else {
                this.$message.success(this.$t('add.add66'));
                this.getList();
              }
            })
            .catch((err) => {
              console.log('err', err);
            });
        })
        .catch((err) => {
          console.log('err==>', err);
          this.$message({
            type: 'info',
            message: this.$t('add.add145'),
          });
        });
    },
    phoneHandle() {
      // 客服电话点击
    },
    workorderHandle() {
      // 新建工单
      this.$refs.WorkOrderAdd.typeList = this.typeList;
      this.$refs.WorkOrderAdd.dialogShow = true;
    },
    closeHandle() {
      // 关闭工单
    },
    backHandle() {
      // 返回主页
      this.$router.go(-1);
    },
    serviceHandle() {
      // 客服
    },
    courseHandle() {
    
      this.$refs.Course.dialogShow = true;
    },
    // 重置
    resetClick() {
      this.dates = [];
      this.form = {
        workNo: '',
        workOrderType: '',
        statusName: '',

        startTime: '',
        endTime: '',
      };
      this.page = 1;
      this.total = 0;
      this.getList();
    },
    // 搜索
    getPatientList() {
      if (this.dates && this.dates.length > 0) {
        this.form.startTime = this.dates[0];
        this.form.endTime = this.dates[1];
      }else {
        this.form.startTime = '';
        this.form.endTime = '';
      }
      this.getList();
    },
    handleSizeChange(val) {
      this.form.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.form.page = val;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.workorder {
  position: relative;
}

.work_service {
  position: fixed;
  // left: 20;
  right: 0;
  bottom: 0;
  margin-right: 22px;
  margin-bottom: 22px;
}

.top_nav_inner {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .top_nav_left {
    display: flex;
    align-items: center;

    span {
      font-size: 16px;
      font-weight: 400;
      line-height: 22px;
      // color: $p_blue;
    }
  }

  .top_nav_right {
    display: flex;
    align-items: center;

    img:nth-of-type(1) {
      width: 34px;
      height: 28px;
    }

    img {
      width: 28px;
      height: 28px;
    }

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 28px;

      span {
        text-align: center;
        margin-top: 5px;
        width: 44px;
        height: 24px;
        background: rgba(255, 255, 255, 0.39);
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
        font-size: 12px;
        padding-top: 5px;
      }
    }
  }
}
</style>
